<template>
    <confirmDialog v-bind="$attrs" v-on="$listeners" :title="$t('system.systemLog.notice')" v-if="isShowDialog" ref="RoamTipsRef" @confirm="confirmDialog" :showCancel="false">
        <span>{{ tips }}</span>
    </confirmDialog>
</template>

<script>
import useRoam from '@/hooks/useRoam';
import { mapState } from 'vuex';

export default {
    name: 'RoamTips',

    inheritAttrs: false,

    mixins: [useRoam],

    props: {
        polling: {
            type: Boolean,
            default: true
        },
        isConfirm: {
            type: Boolean,
            default: false
        }
    },

    data() {
        return {
            tips: this.$t('netWork.mobileSettings.roamTips'),
            isShow: false
        };
    },

    methods: {
        ...mapState('config', ['isRoamStatus']),
        // 打开弹窗
        showDialog() {
            this.$refs.RoamTipsRef.show();
        },

        // 隐藏弹窗
        hideDialog() {
            this.$refs.RoamTipsRef.hide();
        },

        // 确认弹窗
        confirmDialog() {
            if (!this.isConfirm) {
                this.hideDialog();
                return;
            }
        }
    },

    mounted() {
        // 开始轮询
        if (this.polling) {
            this.pollingFetchRoam();
        }
    },

    computed: {
        // 是否具有漫游提醒功能
        isShowDialog() {
            return this.isRoamTips;
        }
    },

    watch: {
        isRoamStatus: {
            handler(nval) {
                if (this.isShowDialog) {
                    // 漫游
                    if (nval) {
                        // 如果目前还没有弹窗
                        if (!this.isShow) {
                            // 避免重复弹窗
                            this.isShow = true;

                            // 打开弹窗
                            this.$refs.RoamTipsRef.show();
                        }
                    } else {
                        this.isShow = false;

                        this.$refs.RoamTipsRef.hide();
                    }
                }
            }
        }
    }
};
</script>

<style lang="less" scoped></style>
